<template>
  <div class="fill-info flex">
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">预定样品-产品寄送信息补充</div>
    <div class="fill main">
      <h4>信息补充</h4>
      <x-input v-model.trim="form.name" placeholder="姓名" :required="true"></x-input>
      <x-input v-model.trim="form.email" placeholder="邮箱" name="email" is-type="email" :required="true"></x-input>
      <x-input v-model.number="form.phone" placeholder="手机号" name="phone" keyboard="number" is-type="china-mobile" :required="true"></x-input>
      <x-input v-model.trim="form.address" placeholder="寄送地址" :required="true"></x-input>
      <x-button mini class="submit" @click.native="submit">确认</x-button>
    </div>
    <c-footer :type="type" @changeType="getType"></c-footer>
  </div>
</template>

<script>
  import {
    XInput,
    XButton
  } from 'vux'
  import {
    editAddress
  } from '@/api/index'
  export default {
    components: {
      XInput,
      XButton
    },
    data() {
      return {
        type: this.$route.query.type ? this.$route.query.type : 0,
        form: {
          name: '',
          email: '',
          phone: '',
          address: ''
        },
        productList:[]
      }
    },
    created() {
      editAddress().then(res => {

      })
      this.productList=JSON.parse(localStorage.getItem('productList')).filter(item=>item.is_select)
    },
    methods: {
      getType(type) {
        this.type = type
      },
      checked() {
        let check = true
        if (!this.form.name) {
          this.$vux.toast.text('请输入姓名！', 'top')
          return false
        } else if (!this.form.email) {
          this.$vux.toast.text('请输入邮箱！', 'top')
          return false
        } else if (!this.form.phone) {
          this.$vux.toast.text('请输入手机号！', 'top')
          return false
        } else if (!this.form.address) {
          this.$vux.toast.text('请输入地址！', 'top')
          return false
        }
        return check
      },
      submit() {
        if (this.checked()) {
          let obj = {
            name: this.form.name,
            email: this.form.email,
            phone: this.form.phone,
            address: this.form.address,
            shopCar:this.productList
          }
          editAddress(obj).then(res => {
            if (res.code == 200) {
              let productList=JSON.parse(localStorage.getItem('productList'));
              productList=productList.filter(item=>!item.is_select)
              localStorage.setItem('productList',JSON.stringify(productList));
              this.$router.push({
                path: '/reserve',
                query:{ type: this.type }
              })
            }
          })
        }
      }
    },
  }
</script>

<style lang="less" scoped>
  .fill {
    padding: 0.54rem 0.21rem;

    h4 {
      font-size: 0.32rem;
      text-align: center;
      margin-bottom: 0.54rem;
    }

    .submit {
      width: 100%;
      background: #2e2e2e;
      color: #fff;
      padding: 0.18rem;
      font-size: 0.32rem;
      margin-top: 0.54rem;
    }
  }
</style>
